<template>
	<el-aside>
		<el-menu 
			class="nav" 
			:collapse="isCollapse" 
			:collapse-transition="false" 
			:unique-opened="true" 
			:default-active="$route.path" 
			:default-openeds="openeds"
			router>
			<template v-for="route in $router.options.routes" v-if="route.children && route.children.length">
				<template v-for="item in route.children">
					<template v-if="item.meta.showToMenu">
						<el-menu-item v-if="item.meta.isTopMenu" :key="route.path + '/' + item.path" :index="item.path">
							<i :class="item.meta.icon"></i>
							<span slot="title">{{ item.meta.title }}</span>
						</el-menu-item>
						<el-submenu v-if="!item.meta.isTopMenu && !item.meta.requireAdmin && !item.meta.links" :index="item.path">
							<template slot="title">
								<i :class="item.meta.icon"></i>
								<span>{{ item.meta.title }}</span>
							</template>
							<template v-for="option in item.children">
								<el-menu-item v-if="option.meta.showToMenu" :key="route.path + '/' + option.path" :index="option.path">
									<i :class="option.meta.icon"></i>
									<span slot="title">{{ option.meta.title }}</span>
								</el-menu-item>
							</template>
						</el-submenu>
						<template v-if="item.meta.requireAdmin && isRequire && !item.meta.links">
							<el-submenu v-if="!item.meta.isTopMenu" :index="item.path">
								<template slot="title">
									<i :class="item.meta.icon"></i>
									<span>{{ item.meta.title }}</span>
								</template>
								<template v-for="option in item.children">
									<el-menu-item v-if="option.meta.showToMenu" :key="route.path + '/' + option.path" :index="option.path">
										<i :class="option.meta.icon"></i>
										<span slot="title">{{ option.meta.title }}</span>
									</el-menu-item>
								</template>
							</el-submenu>
						</template>
						<template v-if="item.meta.links && item.meta.requireAdmin && isRequire">
							<el-submenu :index="item.path">
								<template slot="title">
									<i :class="item.meta.icon"></i>
									<span>{{ item.meta.title }}</span>
								</template>
								<template v-for="option in item.children">
									<el-menu-item v-if="option.meta.showToMenu" index="" @click.native="openLink(option.path)" :class="option.meta.className">
										<i :class="option.meta.icon"></i>
										<span slot="title">{{ option.meta.title }}</span>
									</el-menu-item>
								</template>
							</el-submenu>
						</template>
					</template>
				</template>
			</template>
		</el-menu>
	</el-aside>
</template>

<script>
	import { requireRoles } from '@/config/setting'
	import { getRoleList } from '@/utils/permission'
	export default {
		props: {
			collapse: {
				type: Boolean,
				default: false
			}
		},
		data () {
			return {
				isCollapse: this.collapse,
				openeds: [],
				isRequire: false
			}
		},
		watch:{
			collapse: {
				handler(val, oldVal) {
					this.isCollapse = val;
				},
				deep: true
			}
		},
		created() {
			// 判断是否移动端访问
			if (this._isMobile()) {
				// 折叠菜单栏（子组件传值给父组件）
				this.$emit("handleCollapse", true);
			}
			// 与当前用户的角色匹配权限
			let roleList = JSON.parse(getRoleList());
			requireRoles.map((x) => {
				roleList.map((k) => {
					if (k.roleName == x) {
						return this.isRequire = true;
					}
				})
			})
		},
		mounted() {
			// 监听设备宽度改变
			window.addEventListener('resize', () => {
				if (document.body.clientWidth < 900) {
					// 折叠菜单栏（子组件传值给父组件）
					this.$emit("handleCollapse", true);
				} else {
					// 展开菜单栏（子组件传值给父组件）
					this.$emit("handleCollapse", false);
				}
			})
		},
		methods: {
			// 监测是否移动端设备
			_isMobile() {
				let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
				return flag;
			},
			// 打开链接
			openLink(path) {
				window.open(path, "_blank");
			}
		}
	}
</script>

<style>
	.is-active .un-active {
		color: #303133 !important;
		background: #FFFFFF !important;
	}
	.un-active i {
		color: #303133 !important;
	}
</style>
